<template>
	<view class="topBar" :class="whitebg?'bg':''">
		<view class="header">
			<navigator url="/pages/index/index">
				<image :src="color?iconUrl:'../static/icon/left-arrow-2a7a5a.svg'" mode=""></image>
				<text v-if="ifIndex" :style="{color: color}">首页</text>
			</navigator>
			<view class="header-title" :style="{color: color}">{{title}}</view>
		</view>
		<view v-if="hassearch" class="header-search">
			<image src="../static/icon/search.svg" mode=""></image>
			<input type="text" placeholder="请输入商品名" confirm-type="search"/>
		</view>
	</view>
</template>

<script>
	export default {
		name:"indexHeader",
		props: {
			color: {
				default: "#000",
				type: String
			},
			ifIndex: {
				type: Boolean,
				default: true
			},
			title: {
				type: String,
				require: true
			},
			whitebg: {
				type: Boolean,
				default: false
			},
			hassearch: {
				type:Boolean,
				default: true
			}
		},
		computed: {
			iconUrl() {
				let color = this.color
				color = color.replace('#','')
				const url = '../static/icon/left-arrow-'+color+'.svg'
				return url
			}
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
.topBar {
		position: absolute;
		top: 0;
		width: 100%;
		z-index: 99;
}
.bg {
	background-color: #fff;
}
.header {
	margin-top: 70rpx;
	height: 80rpx;
	display: flex;
	width: 100%;
	padding: 0 20rpx;
	&>navigator {
		display: flex;
		width: 25%;
		line-height: 80rpx;
		&>image {
			width: 80rpx;
			height: 80rpx;
			display: inline-block;
		}
		&>text {
			display: inline-block;
			height: 80rpx;
			line-height: 80rpx;
			font-size: 30rpx;
		}
	}
	&-title {
		display: block;
		width: 50%;
		text-align: center;
		line-height: 80rpx;
		font-size: 35rpx;
		font-weight: bold;
	}
	&-search {
		background-color: #f3f3f3;
		height: 50rpx;
		width: 90%;
		margin: 0 auto;
		justify-content: space-between;
		border-radius: 25rpx;
		display: flex;
		&>image {
			width: 50rpx;
			height: 50rpx;
			margin: 2rpx 20rpx 0;
		}
		&>input {
			height: 50rpx;
			line-height: 50rpx;
			font-size: 24rpx;
			flex-grow: 1;
		}
	}
}
</style>